<!DOCTYPE html>
<p>There should be a yellow/hotpink square 2x2 chessboard below.</p>
<div style="columns:3; column-gap:0; width:60px; line-height:20px; orphans:1; widows:1;">
  <div style="overflow: hidden;">
    <div style="background:yellow;"><br></div>
    <table cellspacing="0" cellpadding="0" style="width:40px;">
        <!-- The thead should be repeated at the top of each column
             that the table breaks into. -->
        <thead style="break-inside:avoid;">
            <tr>
                <td style="background:hotpink;"><br></td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><br></td>
            </tr>
            <tr>
                <td><br></td>
            </tr>
            <tr>
                <td><br></td>
            </tr>
            <tr>
                <td style="background:yellow;"><br></td>
            </tr>
            <tr>
                <td><br></td>
            </tr>
            <tr>
                <td><br></td>
            </tr>
            <tr>
                <td><br></td>
            </tr>
        </tbody>
    </table>
    <br>
    <br>
    <br>
  </div>
</div>
